<template>
  <div class="default-main ba-table-box">
    <el-alert class="ba-table-alert"
              v-if="baTable.table.remark"
              :title="baTable.table.remark"
              type="info"
              show-icon />

    <!-- 表格顶部菜单 -->
    <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                 :quick-search-placeholder="t('Quick search placeholder', { fields: '订单号' })" />
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table />

    <!-- 详情 -->
    <DetailCom :rowData="state.rowData" />
  </div>
</template>


<script setup lang="ts">
import { provide, reactive, ref, onBeforeMount } from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import DetailCom from './detailCom.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useAdminInfo } from '/@/stores/adminInfo'
import { useI18n } from 'vue-i18n'
import { getWareHouseList } from '/@/api/backend/order/order'
import { concat } from 'lodash-es'


defineOptions({
    name: 'product/product',
})

const { t } = useI18n()
const state: {
    buttonLoading: boolean,
    rowData: Object
} = reactive({
    buttonLoading: false,
    rowData: {}
})
const adminInfo = useAdminInfo()
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'info',
        title: 'Info',
        text:  '详情',
        type: 'primary',
        icon: '',
        class: 'newButton',
        disabledTip: false,
        display: (row: TableRow, field: TableColumn) => {
            return baTable.auth('getInfo')
        },
        click: (row: TableRow) => {
            state.rowData = {...row}
            baTable.form.operate = 'detail'
        }
    }
]
optButtons = concat(defaultOptButtons(['edit', 'delete']), optButtons)
optButtons[1].display = (row) => {
    return row.id != adminInfo.id
}
type keymaps = {
    [key: string]: string | number
}
const warehouse_sel:keymaps = {}
const baTable = new baTableClass(
    new baTableApi('/product/product/'),
    {
        column: [
            {
                label: 'sku',
                align: 'center',
                prop: 'sku',
                operatorPlaceholder: '请输入sku',
                width: 100
            },
            {
                label: '产品ID',
                align: 'center',
                prop: 'product_id',
                operator: false,
                width: 200
            },
            {
                label: '产品名称',
                align: 'center',
                prop: 'product_name',
                operator: false
            },
            {
                label: '仓库',
                prop: 'warehouse_id',
                align: 'center',
                comSearchRender: 'select',
                replaceValue: warehouse_sel,
                show: false
            },
            { 
                label: '创建时间', 
                prop: 'created_time', 
                align: 'center',  
                sortable: 'custom', 
                operator: false, 
                width: 160 
            },
            {
                label: t('Operate'),
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: optButtons,
                operator: false,
            }
        ],
        dblClickNotEditColumn: ['all']
    },
    {
        defaultItems: {
            status: '1',
        },
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()

const getOverseasWarehouseArr = () => {
    return getWareHouseList().then(res => {
        if(res.data && res.data.length) {
            res.data.forEach((v: any) => {
                warehouse_sel[v.warehouse_id] = v.warehouse_name
            })
        }
    })
}

onBeforeMount(() => {
    getOverseasWarehouseArr()
})
</script>

<style scoped lang="scss"></style>
